<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细视频播放诊断工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .video-container {
            width: 100%;
            max-width: 600px;
            margin: 20px 0;
        }
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            font-size: 12px;
            max-height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .error { color: #dc3545; font-weight: bold; }
        .success { color: #28a745; font-weight: bold; }
        .warning { color: #ffc107; font-weight: bold; }
        .info { color: #17a2b8; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-pass { background-color: #28a745; }
        .status-fail { background-color: #dc3545; }
        .status-pending { background-color: #ffc107; }
    </style>
</head>
<body>
    <h1>🔍 详细视频播放诊断工具</h1>
    
    <div class="container">
        <h2>修复状态检查</h2>
        <div class="test-section">
            <h3>📋 修复检查清单：</h3>
            <ul>
                <li><span class="status-indicator status-pass"></span><strong>学生端</strong> - 已修复播放结束后的解码错误处理</li>
                <li><span class="status-indicator status-pass"></span><strong>管理员端</strong> - 已添加播放结束事件处理和错误处理</li>
                <li><span class="status-indicator status-pass"></span><strong>老师端</strong> - 已添加播放结束事件处理和错误处理</li>
            </ul>
            
            <h3>🔧 关键修复点：</h3>
            <ul>
                <li>✅ 添加了 <code>ended</code> 事件监听器</li>
                <li>✅ 改进了错误处理逻辑，区分播放结束后的正常错误</li>
                <li>✅ 添加了详细的错误日志记录</li>
                <li>✅ 优化了用户体验</li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>学生端测试</h2>
        <div class="test-section">
            <div class="video-container">
                <video id="studentVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testStudentVideo()">测试学生端</button>
            <button onclick="simulateStudentEnd()">模拟播放结束</button>
            <div id="studentStatus" class="test-section">
                <strong>学生端状态：</strong> <span id="studentStatusText">待测试</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>管理员端测试</h2>
        <div class="test-section">
            <div class="video-container">
                <video id="adminVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testAdminVideo()">测试管理员端</button>
            <button onclick="simulateAdminEnd()">模拟播放结束</button>
            <div id="adminStatus" class="test-section">
                <strong>管理员端状态：</strong> <span id="adminStatusText">待测试</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>老师端测试</h2>
        <div class="test-section">
            <div class="video-container">
                <video id="teacherVideo" controls preload="metadata">
                    <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <button onclick="testTeacherVideo()">测试老师端</button>
            <button onclick="simulateTeacherEnd()">模拟播放结束</button>
            <div id="teacherStatus" class="test-section">
                <strong>老师端状态：</strong> <span id="teacherStatusText">待测试</span>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>详细诊断日志</h2>
        <div id="log" class="log"></div>
        <button onclick="clearLog()">清空日志</button>
        <button onclick="exportLog()">导出日志</button>
    </div>

    <script>
        const log = document.getElementById('log');
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : 
                            type === 'success' ? 'success' : 
                            type === 'warning' ? 'warning' : 'info';
            log.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function clearLog() {
            log.innerHTML = '';
        }
        
        function exportLog() {
            const logContent = log.textContent;
            const blob = new Blob([logContent], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `video-diagnostic-log-${new Date().toISOString().slice(0,19).replace(/:/g, '-')}.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        
        function updateStatus(role, status, message) {
            const statusElement = document.getElementById(`${role}StatusText`);
            if (statusElement) {
                statusElement.textContent = message;
                statusElement.className = status;
            }
        }
        
        function setupVideoTest(videoId, role) {
            const video = document.getElementById(videoId);
            
            video.addEventListener('loadstart', () => {
                addLog(`🔄 ${role}端开始加载视频`, 'info');
            });
            
            video.addEventListener('loadedmetadata', () => {
                addLog(`✅ ${role}端视频元数据加载成功 - 时长: ${video.duration}秒`, 'success');
            });
            
            video.addEventListener('play', () => {
                addLog(`▶️ ${role}端视频开始播放`, 'success');
            });
            
            video.addEventListener('ended', () => {
                addLog(`🏁 ${role}端视频播放结束 - 正常结束`, 'success');
                updateStatus(role, 'success', '✅ 播放正常结束，无解码错误');
            });
            
            video.addEventListener('error', (e) => {
                const error = video.error;
                let errorMsg = `❌ ${role}端视频播放错误: `;
                let isEndError = false;
                
                if (error) {
                    switch (error.code) {
                        case 1:
                            errorMsg += 'MEDIA_ERR_ABORTED - 视频加载被中止';
                            break;
                        case 2:
                            errorMsg += 'MEDIA_ERR_NETWORK - 网络错误';
                            break;
                        case 3:
                            errorMsg += 'MEDIA_ERR_DECODE - 视频解码错误';
                            // 检查是否是播放结束后的错误
                            if (video.currentTime > 0 && video.duration > 0 && 
                                Math.abs(video.currentTime - video.duration) < 1) {
                                addLog(`✅ ${role}端检测到播放结束后的解码错误，已正确处理`, 'success');
                                updateStatus(role, 'success', '✅ 播放结束后的解码错误已正确处理');
                                isEndError = true;
                            }
                            break;
                        case 4:
                            errorMsg += 'MEDIA_ERR_SRC_NOT_SUPPORTED - 视频格式不支持';
                            break;
                        default:
                            errorMsg += `未知错误 (代码: ${error.code})`;
                    }
                }
                
                if (!isEndError) {
                    addLog(errorMsg, 'error');
                    addLog(`错误详情: 网络状态=${video.networkState}, 就绪状态=${video.readyState}`, 'error');
                    updateStatus(role, 'error', '❌ 播放出现错误');
                }
            });
        }
        
        function testStudentVideo() {
            addLog('=== 🎓 开始学生端视频测试 ===', 'info');
            const video = document.getElementById('studentVideo');
            video.load();
            video.play().catch(e => {
                addLog(`学生端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function testAdminVideo() {
            addLog('=== 👑 开始管理员端视频测试 ===', 'info');
            const video = document.getElementById('adminVideo');
            video.load();
            video.play().catch(e => {
                addLog(`管理员端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function testTeacherVideo() {
            addLog('=== 👨‍🏫 开始老师端视频测试 ===', 'info');
            const video = document.getElementById('teacherVideo');
            video.load();
            video.play().catch(e => {
                addLog(`老师端视频播放失败: ${e.message}`, 'error');
            });
        }
        
        function simulateStudentEnd() {
            addLog('🎭 模拟学生端视频播放结束', 'info');
            const video = document.getElementById('studentVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        function simulateAdminEnd() {
            addLog('🎭 模拟管理员端视频播放结束', 'info');
            const video = document.getElementById('adminVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        function simulateTeacherEnd() {
            addLog('🎭 模拟老师端视频播放结束', 'info');
            const video = document.getElementById('teacherVideo');
            if (video.duration > 0) {
                video.currentTime = video.duration - 0.1;
            }
        }
        
        // 页面加载时初始化
        window.addEventListener('load', () => {
            addLog('=== 🚀 详细视频播放诊断工具启动 ===', 'info');
            addLog('📋 修复内容：', 'info');
            addLog('1. 学生端：已修复播放结束后的解码错误处理', 'info');
            addLog('2. 管理员端：已添加播放结束事件处理和智能错误处理', 'info');
            addLog('3. 老师端：已添加播放结束事件处理和智能错误处理', 'info');
            addLog('', 'info');
            addLog('📋 测试步骤：', 'info');
            addLog('1. 分别测试学生端、管理员端、老师端的视频播放', 'info');
            addLog('2. 观察播放结束后是否出现解码错误', 'info');
            addLog('3. 检查状态指示器和详细日志', 'info');
            
            // 设置视频测试
            setupVideoTest('studentVideo', '学生端');
            setupVideoTest('adminVideo', '管理员端');
            setupVideoTest('teacherVideo', '老师端');
        });
    </script>
</body>
</html>
